<template>
  <u-loading-icon
    :text="loadingData.text"
    :mode="loadingData.mode"
    textSize="14"
    size="14"
    :customStyle="{ padding: '10rpx' }"></u-loading-icon>
</template>

<script setup lang="ts">

const stautsList = new Map([
  [
    'more',
    {
      text: '- 可加载更多 -',
      mode: 'hidden'
    }
  ],
  [
    'loading',
    {
      text: '加载中',
      mode: 'circle'
    }
  ],
  [
    'nomore',
    {
      text: '- 暂无更多 -',
      mode: 'hidden'
    }
  ]
])

interface DataTypes {
  text: string;
  mode: string;
};

const loadingData = computed(()=>{
  return stautsList.get(props.status) as DataTypes;
});

type StatusType = 'more' | 'loading' | 'nomore';
const props = defineProps({
  status: {
    type: String as PropType<StatusType>,
    default: 'loading'
  }
})
</script>